<template>
  <div id="login">
    <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="options" />
    <div class="from">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input placeholder="请输入账号" v-model="ruleForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <p class="flex">
            <el-input v-model="ruleForm.code" placeholder="请输入验证码" />
            <canvas id="canvas" @click="yzm"></canvas>
          </p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { rm } from '../../utils/index'
import { useBgdom } from '../../hooks/back'
import { Login } from '../../hooks/login'
import {userCode} from '../../api/user'
const ruleFormRef = ref()

//背景图组件数据
const { particlesInit, particlesLoaded, options } = useBgdom()
//登录效验
const { rules, ruleForm, submitForm } = Login()

//获取canvas
onMounted(() => {
  // const c1 = document.getElementById('canvas')
  // rm(c1, "4567")
})
userCode().then(res => {
    console.log(res.yzm);
    const c1 = document.getElementById('canvas')
    rm(c1, res.yzm)
    localStorage.setItem('code',res.yzm)
})

const yzm = () => {
  userCode().then(res => {
    console.log(res.yzm);
    const c1 = document.getElementById('canvas')
    rm(c1, res.yzm)
    localStorage.setItem('code',res.yzm)
})
 
}

</script>
<style  scoped lang="scss">
.flex {
  display: flex;

  .el-input {
    width: 240px;
    height: 32px;
  }
}

#login {
  width: 100%;
  height: 100%;

  // background: url('https://spider.ws.126.net/0df81340663fd98da28add81a4c4bbfa.gif') no-repeat;
  // background-size:100% 100%;
  .from {
    width: 500px;
    height: 300px;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;

    .el-button {
      margin-left: 120px;
    }
  }
}
</style>
